<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<wd-navbar fixed placeholder title="我的" safeAreaInsetTop></wd-navbar>
				<image class="header-bg" src="https://lvshi.haidanet.com/uni-static/user/img/my/my-bg.png"></image>
				<view class="header">
					<image class="avatar" v-if="!head" src="@/static/logo.png"></image>
					<image class="avatar" v-else :src="head"></image>
					<view class="name">{{ realname }}</view>
					<!-- <view class="date">2024年3月29日</view> -->

					<view class="setting" @click="goPage('/my/setting/setting')">
						<text class="iconfont icon-shezhi"></text>
					</view>
				</view>

				<view class="card tools">
					<view class="item" @click="goPage('/my/case/index/index')">
						<view class="number">{{ myCaseNums }}</view>
						<view class="text">我的案件</view>
					</view>
					<view class="item" @click="goPage('/my/my-consult/my-consult')">
						<view class="number">{{ myAskNums }}</view>
						<view class="text">我的咨询</view>
					</view>
					<view class="item" @click="goPage()">
						<view class="number">{{ myCollectNums }}</view>
						<view class="text">我的收藏</view>
					</view>
				</view>

				<!-- 		<view class="card menu-1">
					<wd-cell-group>
						<wd-cell is-link title="我的案件" value="39" @click="goPage()">
							<template #icon>
								<text class="iconfont icon-a-040_xingshianjian"></text>
							</template>
						</wd-cell>
						<wd-cell is-link title="我的咨询 " value="39" @click="goPage()">
							<template #icon>
								<text class="iconfont icon-zixun"></text>
							</template>
						</wd-cell>
						<wd-cell is-link title="我的收藏" value="39" @click="goPage()">
							<template #icon>
								<text class="iconfont icon-shoucang"></text>
							</template>
						</wd-cell>
					</wd-cell-group>
				</view> -->
				<view class="card menu-2">
					<wd-cell-group>
						<wd-cell @click="goPage('/purse/index/index')" is-link title="我的钱包" :value="myBlance">
							<template #icon>
								<text class="iconfont icon-qianbao"></text>
							</template>
						</wd-cell>
					</wd-cell-group>
				</view>
				<view class="card menu-3">
					<wd-cell-group>
						<wd-cell is-link title="协同" @click="goPage('/collaborative/my-posts/my-posts')">
							<template #icon>
								<text class="iconfont icon-bangzhuyushuoming"></text>
							</template>
						</wd-cell>
						<wd-cell is-link title="查询" @click="goPage('/query/my-posts/my-posts')">
							<template #icon>
								<text class="iconfont icon-bangzhuyushuoming"></text>
							</template>
						</wd-cell>
						<!-- <wd-cell is-link title="帮助中心" @click="goPage('/my/help/help')">
							<template #icon>
								<text class="iconfont icon-bangzhuyushuoming"></text>
							</template>
						</wd-cell> -->
						<wd-cell is-link title="帮助中心" @click="goPage('/my/help/help')">
							<template #icon>
								<text class="iconfont icon-bangzhuyushuoming"></text>
							</template>
						</wd-cell>
						<wd-cell is-link title="客服中心" @click="goPage('/my/Customer/Customer')">
							<template #icon>
								<text class="iconfont icon-kefu"></text>
							</template>
						</wd-cell>
						<wd-cell is-link title="设置" @click="goPage('/my/cipher/cipher')">
							<template #icon>
								<text class="iconfont icon-shezhi"></text>
							</template>
						</wd-cell>
					</wd-cell-group>
				</view>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';
	import useRouter from '@/hooks/useRouter.ts';
	import { useUserStore } from '@/store';
	export default defineComponent({
		name: '',
		setup(props, ctx) {
			const router = useRouter();
			const userStore = useUserStore();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const head = computed(() => {
				return userStore.head;
			})
			const realname = computed(() => {
				return userStore.realname || userStore.nickname;
			})
			const myCollectNums = computed(() => {
				return userStore.my_collect_nums;
			})
			const myAskNums = computed(() => {
				return userStore.my_ask_nums;
			})
			const myCaseNums = computed(() => {
				return userStore.my_case_nums;
			})
			const myBlance = computed(() => {
				return userStore.blance;
			})

			const goPage = (url : any) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push(url)
			}
			return {
				theme,
				goPage,
				head,
				realname,
				myCollectNums,
				myAskNums,
				myCaseNums,
				myBlance,
			};
		}
	});
</script>

<style lang="less" scoped>
	.container {
		position: relative;
		padding: 24rpx;

		:deep(.wd-navbar) {
			position: absolute;
			width: 100%;
			height: 100rpx;
			// #ifdef MP
			height: 96rpx !important;
			line-height: 96rpx !important;
			// #endif
			background-color: transparent !important;

			// #ifdef MP
			.wd-navbar__right {
				top: -10rpx;
			}

			// #endif
			.wd-navbar__right:hover {
				background-color: transparent !important;
			}

			.wd-navbar__title {
				color: #ffffff;
			}

			&::after {
				display: none !important;
			}
		}

		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 442rpx;
			z-index: 1;
		}

		.header {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 0rpx;
			top: -10px;

			.setting {
				color: #fff;
				position: absolute;
				top: 20rpx;
				right: 20rpx;

				.iconfont {
					font-size: 50rpx;
				}
			}

			.avatar {
				width: 108rpx;
				height: 108rpx;
				background: #ffffff;
				border-radius: 50%;
				border: 6rpx solid #ffffff;
			}

			.name {
				font-family: PingFang;
				font-weight: bold;
				font-size: 29rpx;
				color: #ffffff;
				margin: 12rpx;
			}

			.date {
				font-family: PingFang;
				font-weight: 400;
				font-size: 21rpx;
				color: #ffffff;
			}
		}

		.tools {
			position: relative;
			margin-top: 12rpx;
			z-index: 2;
			display: flex;
			padding: 18rpx 24rpx;
			width: calc(100% - 24rpx - 24rpx);
			justify-content: space-between;

			.item {
				text-align: center;
				width: calc(100% / 3);

				.number {
					font-family: Akrobat;
					font-weight: bold;
					font-size: 52rpx;
					color: #333333;
				}

				.text {
					font-family: PingFang;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					margin-top: 15rpx;
				}
			}
		}

		:deep(.wd-cell__value) {
			color: #c91c1f;
		}

		.menu-1,
		.menu-2,
		.menu-3 {
			margin-top: 24rpx;

			.iconfont {
				font-size: 40rpx !important;
				margin-right: 10rpx;
			}
		}

		.menu-2 {
			color: #c91c1f !important;

			:deep(.wd-cell__title) {
				color: #c91c1f !important;
			}

			.iconfont {
				color: #c91c1f !important;
			}
		}
	}
</style>